<script setup>
import { onMounted, ref, watch } from "vue";
import * as echarts from "echarts";
import { theme } from "../assets/js/theme.js";

const props = defineProps(["lineData", "province"]);
const emit = defineEmits([]);

var option;
var myChart;

option = {
  title: {
    subtext: "Unit: Mt CO2",
    itemGap: 6, // 主副标题之间的差距
    top: "1%",
    left: "1%",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  legend: {
    top: "3%",
    right: "4%",
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  series: [],
};

watch(
  () => [props.lineData, props.province],
  () => {
    myChart.setOption(option, true);
    myChart.setOption({
      title: {
        text: props.province.name + "表观排放数据折线图",
      },
      legend: {
        data: props.lineData.legendData,
        itemStyle: {
          color: ["#d87c7c", "#919e8b", "#d7ab82", "#6e7074"],
        },
      },
      xAxis: [
        {
          data: props.lineData.years,
        },
      ],
      series: [
        {
          name: props.lineData.legendData[0],
          type: "line",
          stack: "Total",
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#d87c7c",
              },
              {
                offset: 1,
                color: "#efa18d",
              },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          data: props.lineData.value[0],
        },
        {
          name: props.lineData.legendData[1],
          type: "line",
          stack: "Total",
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              // {
              //   offset: 0,
              //   color: "#4b565b",
              // },
              {
                offset: 1,
                color: "#919e8b",
              },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          data: props.lineData.value[1],
        },
        {
          name: props.lineData.legendData[2],
          type: "line",
          stack: "Total",
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#D7AB82",
              },
              {
                offset: 1,
                color: "#FEF8EF",
              },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          data: props.lineData.value[2],
        },
        {
          name: props.lineData.legendData[3],
          type: "line",
          stack: "Total",
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#6E7074",
              },
              // {
              //   offset: 1,
              //   color: "#84868a",
              // },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          data: props.lineData.value[3],
        },
      ],
    });
  },
  { deep: true },
  { immediate: true }
);
onMounted(() => {
  myChart = echarts.init(document.getElementById("provinceLine"), theme);

  myChart.setOption(option);
});
</script>

<template>
  <div class="module">
    <div id="provinceLine"></div>
  </div>
</template>

<style lang="scss" scoped>
.module {
  height: 5.5rem;
  // border: 1px red solid;
  margin: 0.25rem 0 0 0;

  #provinceLine {
    width: 100%;
    height: 100%;
  }
}
</style>
>
